<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>富扬数据看板</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="/stylesheets/css/bootstrap.min.css">
  <link rel="stylesheet" href="/stylesheets/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="/stylesheets/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/stylesheets/skins/_all-skins.min.css">
  <style>
    .content-header>h1>.breadcrumb {
      background: transparent;
      margin-top: 0;
      margin-bottom: 0;
      font-size: 12px;
      padding: 7px 5px;
      border-radius: 2px;
      display: inline-block;
    }
    .delete, .set{
      cursor: pointer;
      margin: 0 20px;
    }
    a:hover{
      text-decoration: underline;
    }
    .customerId{
      visibility: hidden;
      height: 0;
    }
  </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">

  <%- include("./public/header.ejs") %>

  <%- include("./public/aside.ejs") %>

  <div class="content-wrapper">
    <section class="content-header">
      <h1>
        首页
        <ol class="breadcrumb">
          <li class="active"><i class="glyphicon glyphicon-dashboard"></i>首页</li>
        </ol>
      </h1>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="box">
        <div class="box-header with-border">
          <h3 class="box-title">
            客户管理
            <a class="btn btn-info btn-xs" data-toggle="modal" data-target="#modal-customer">添加客户</a>
          </h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <div class="h-300">
            <table id="example" class="table table-bordered table-condensed table-striped table-hover">
              <thead>
                <tr>
                  <th>名称</th>
                  <th style="width: 160px;">操作</th>
                </tr>
              </thead>
              <tbody>
                <% for(let i=0;i<customerData.length;i++){ %>
                  <tr>
                    <td><%= customerData[i].cName %></td>
                    <td style="text-align: center;" align="center">
                      <a class="setCustomer set" data-toggle="modal" data-target="#modal-customer-set" data-id="<%= customerData[i].cId %>">修改</a>
                      <a class="deleteCustomer delete" data-href="/customer/delete?cId=<%= customerData[i].cId %>">删除</a>
                    </td>
                  </tr>
                <% } %>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  </div>

  <%- include("./public/footer.ejs") %>
</div>

<!-- 添加客户 -->
<div class="modal fade" id="modal-customer">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <form role="form" method="post" action="/customer/add">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">请输入客户名称</h4>
        </div>
        <div class="modal-body">
          <input type="text" class="form-control" placeholder="客户名称" name="cName" required autocomplete="off">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 修改客户 -->
<div class="modal fade" id="modal-customer-set">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <form role="form" method="post" action="/customer/set">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">请输入客户新名称</h4>
        </div>
        <div class="modal-body">
          <input type="text" class="form-control customerId" name="cId" readonly>
          <input type="text" class="form-control" placeholder="客户新名称" name="cName" required autocomplete="off">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="/javascripts/jquery.dataTables.min.js"></script>
<script src="/javascripts/dataTables.bootstrap.min.js"></script>
<script src="/javascripts/adminlte.min.js"></script>
<script>

  $('#example').DataTable({
    searching: true,
    ordering: true,
    order: [[ 0, 'desc' ]],
    language: {
      "sProcessing": "处理中...",
      "sLengthMenu": "显示 _MENU_ 项结果",
      "sZeroRecords": "没有匹配结果",
      "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
      "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
      "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
      "sInfoPostFix": "",
      "sSearch": "搜索:",
      "sUrl": "",
      "sEmptyTable": "表中数据为空",
      "sLoadingRecords": "载入中...",
      "sInfoThousands": ",",
      "oPaginate": {
          "sFirst": "首页",
          "sPrevious": "上页",
          "sNext": "下页",
          "sLast": "末页"
      },
      "oAria": {
          "sSortAscending": ": 以升序排列此列",
          "sSortDescending": ": 以降序排列此列"
      }
    }
  })

  // 删除客户
  $('#example').on("click", ".deleteCustomer", function(){
    if(confirm("确认删除该客户？")){
      location.href = this.dataset.href;
    }
  })

  // 修改客户
  $('#example').on("click", ".setCustomer", function(){
    $(".customerId").val( this.dataset.id );
  })


</script>
</body>
</html>
